<template>
    <view class="content">
        <view class="info">
            <image :src="data.headimgurl || '/static/icon/avatar.png'" class="avatar"></image>
            <view class="u-flex-1">
                <view class="name">{{data.user_name}}</view>
                <view>手机号：{{data.phone}}</view>
            </view>
        </view>
        
        <view class="calendar text-df">
            <view class="box">
                <view class="top">
                    <view>日历</view>
                    <view class="u-flex">
                        <u-icon name="play-left-fill" size="28" @click="prev"></u-icon>
                        <view class="u-p-l-15 u-p-r-15">{{currentYear}}年{{currentMonth + 1}}月</view>
                        <u-icon name="play-right-fill" size="28" @click="next"></u-icon>
                    </view>
                    <!-- <view>{{currentYear}}年{{currentMonthChinese}}{{currentDay}}日</view> -->
                </view>
                <view class="label">
                    <view class="label-l">
                        <view class="round round1"></view>
                        <view>漏打卡</view>
                    </view>
                    <view class="label-c">
                        <view class="round round2"></view>
                        <view>休息</view>
                    </view>
                    <view class="label-r">
                        <view class="round round3"></view>
                        <view>请假</view>
                    </view>
                </view>
            </view>
        	
        	<view>
        		<view class="row title">
        			<text class="text" v-for="(item, index) in title" :key="index + 'A'">{{item}}</text>
        		</view>
        		<view class="row center">
                    <!-- 漏打卡-miss，休息-rest，请假-leave，今日-currentDay -->
                    <!-- status 1漏打开 2休息 3请假 -->
                    <!-- 上个月 -->
        			<view v-for="(item, index) in firstMonth" :key="index + 'B'" class="grey text">{{item + 1}}</view>
                    <!-- 本月 -->
                    <template>
                        <view v-for="(item, index) in dayList" :key="item.name" class="text"
                         :class="{miss : item.status == 1, rest : item.status == 2, leave : item.status == 3,
                         active : item.same_day == 1}">
                            <text>{{ item.same_day == 1 ? '今日' : item.name }}</text>
                        </view>
                    </template>
                    <!-- 下个月 -->
        			<view v-for="(item, index) in lastMonth" :key="index + 'C'" class="grey text">{{item + 1}}</view>
        		</view>
        	</view>
        </view>
        
        <view class="item" v-for="(item,index) in list" :key="item.id">
            <view class="u-flex-1">
                <view class="sub">
                    <!-- <text style="color: #fe6155;padding-right: 10rpx;">迟到</text> -->
                    {{item.name}}
                </view>
                <view class="item-add">
                    <image src="../../static/icons/card_04.png" class="card-04"></image>
                    <view class="u-flex-1">{{item.address}}</view>
                </view>
            </view>
            <view class="title">{{item.time}}</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: ['日','一','二','三','四','五','六'],
                currentDay: '',
                currentMonth: '',
                currentYear: '',
                cardId: '',//打卡任务id
                dayList: [],
                cday: '',
                id: '',
                date: '',
                dateM: '',
                list: [],
                data: {},
            };
        },
        onLoad(option) {
            this.id = option.id
            
            this.currentYear = new Date().getFullYear();
            this.currentMonth = new Date().getMonth();
            this.currentDay = new Date().getDate();
            
            var m = this.currentMonth + 1
            this.date = this.currentYear+'-'+(m > 10 ? m : '0' + m)+'-'+ (this.currentDay > 10 ? this.currentDay : '0' + this.currentDay)
            this.dateM = this.currentYear+'年'+(m > 10 ? m : '0' + m)+'月'
            // console.log(this.dateM, this.date)
            this.getList()
            this.getRecordDate()
        },
        computed:{
        	currentMonthChinese(){
        		return new Date(this.currentYear, this.currentMonth).toLocaleString('default', {month: 'short'});
        	},
        	currentDays(){
        		return new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
        	},
        	firstMonth(){
        		// 先获取上个月有多少天
        		const lastMonthDays = new Date(this.currentYear, this.currentMonth, 0).getDate();
        		// 获取上个月在下个月有几天
        		const lastInThisMonth = new Date(this.currentYear, this.currentMonth, 1).getDay();
        		// 要根据剩余天数切割数组，如果上个月剩余0天，则整个数组应为空；
        		const filterDay = !lastInThisMonth ? lastMonthDays : -lastInThisMonth;
        		// slice array
        		return Array.from(Array(lastMonthDays).keys()).slice(filterDay);
        	},
        	lastMonth(){
        		// 先获取下个月有多少天
        		const lastMonthDays = new Date(this.currentYear, this.currentMonth + 2, 0).getDate();
        		// 获取下个月在本月有几天
        		const lastInThisMonth = 7 - (new Date(this.currentYear, this.currentMonth + 1, 1).getDay());
        		// 如果0天或7天，则整个数组应为空；
        		const filterDay = !lastInThisMonth ? '' : (lastInThisMonth == 7 ? '' : lastInThisMonth);
        		// slice array
        		return Array.from(Array(lastMonthDays).keys()).slice(0,filterDay);
        	}
        },
        methods: {
            // 请假休息记录 当天
            getRecordDate() {
                this.$ajax('leave_record_date', {
                	user_token: this.$getSync('userToken'),
                	date: this.date,//日期（2023-06-03）
                	user_id: this.id,//用户id 管理员查看
                }).then(ret => {
                	if (ret.success == 1000) {
                		this.list = ret.detail.clockin
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            // 请假休息记录
            getList() {
            	this.$ajax('leave_record', {
            		user_token: this.$getSync('userToken'),
            		date: this.dateM,
            		user_id: this.id,
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.data = ret.detail;
                        this.dayList = [];
                        if (!this.cday) {
                            this.cday = this.currentDays
                        }
                        for (var i = 0; i < this.cday; i++) {
                            this.dayList.push({
                                name: i + 1,
                                status: 0,
                                same_day: 0
                            })
                        }
                        // status 1漏打开 2休息 3请假
                        if (ret.detail && ret.detail.calendar.length > 0) {
                            this.dayList.forEach((cur, index) => {
                                ret.detail.calendar.forEach((el) => {
                                    if (el.solar_calendar == cur.name) {
                                        cur.status = el.status
                                        cur.same_day = el.same_day
                                    }
                                })
                            })
                            // console.log(this.dayList)
                        } 
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            // 上一个月
            prev() {
            	if (this.currentDays === 0) {
            		this.currentYear--;
            		this.currentMonth = 11;
            	} else {
            		this.currentMonth--;
            	}
                
                if (this.currentMonth === -1) {
                    this.currentYear--;
                    this.currentMonth = 11;
                }
                var pDate = new Date(this.currentYear,this.currentMonth + 1,0);
                this.cday = pDate.getDate()
                
                var m = this.currentMonth + 1
                this.dateM = this.currentYear+'年'+(m > 10 ? m : '0' + m)+'月'
                // console.log(this.currentMonth)
                this.getList()
            },
            // 下一个月
            next() {
            	if (this.currentDays === 11) {
            		this.currentYear++;
            		this.currentMonth = 0;
            	} else {
            		this.currentMonth++;
            	}
                if (this.currentMonth == 12) {
                    this.currentYear++;
                    this.currentMonth = 0;
                }
                var nDate = new Date(this.currentYear,this.currentMonth + 1,0);
                this.cday = nDate.getDate()
                
                var m = this.currentMonth + 1
                this.dateM = this.currentYear+'年'+(m > 10 ? m : '0' + m)+'月'
                this.getList()
            },
        }
    };
</script>

<style lang="scss">
    
    
    
    .info{
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        padding: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
    }
    .avatar{
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
        margin-right: 25rpx;
    }
    .name{
        font-size: 32rpx;
        font-weight: bold;
        padding-bottom: 5rpx;
    }
    
    // 日历
    .calendar{
        background-color: #fff;
        border-radius: 20rpx;
        padding: 30rpx 10rpx;
        margin-bottom: 20rpx;
        font-size: 26rpx;
    }
    .box{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding-bottom: 20rpx;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .top{
    	padding-left: 25rpx;
    }
    .top>view:first-child{
        font-size: 44rpx;
        font-weight: bold;
    }
    .top>view:last-child{
        font-size: 32rpx;
        font-weight: bold;
    }
    .arrow-l{
        width: 24rpx;
        height: 24rpx;
        margin-right: 15rpx;
    }
    .label{
        font-size: 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .label>view{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15rpx;
    }
    .label-l{
        color: #6d6d6d;
    }
    .label-c{
        color: #803906;
    }
    .label-r{
        color: #fe6155;
    }
    .round{
        width: 20rpx;
        height: 15rpx;
        border-radius: 5rpx;
        margin-right: 10rpx;
    }
    .round1{
        background-color: #e6e6e6;
    }
    .round2{
        background-color: #ffecd2;
    }
    .round3{
        background-color: #ffe4e2;
    }
    .title{
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
        padding: 0 10rpx;
    }
    .text{
    	width: calc(540rpx / 7);
    	height: calc(540rpx / 7);
    	text-align: center;
    	line-height: calc(540rpx / 7);
        margin: 10rpx;
    }
    .center{
    	display: flex;
    	flex-wrap: wrap;
    	justify-content: flex-start;
    	align-items: center;
    }
    .grey{
    	color: #e1e1e1;
    }
    .active{
        border-radius: 50%;
    	color: #fff;
    	background-color: #00a1e9;
    }
    .miss{
        border-radius: 15rpx;
        color: #6d6d6d;
        background-color: #e6e6e6;
    }
    .rest{
        border-radius: 15rpx;
        color: #803906;
        background-color: #ffecd2;
    }
    .leave{
        border-radius: 15rpx;
        color: #fe6155;
        background-color: #ffe4e2;
    }
    
    
    
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding: 20rpx;
    }
    .item{
        background-color: #fff;
        border-radius: 20rpx;
        padding: 30rpx 25rpx;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .title{
        font-size: 30rpx;
        font-weight: bold;
    }
    .sub{
        font-size: 28rpx;
        color: #444;
    }
    .item-add{
        padding-top: 10rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        color: #8e939c;
    }
    .card-04{
        width: 20rpx;
        height: 24rpx;
        margin-right: 10rpx;
    }
    
</style>
